<template>
    <div v-loading="loading" >
        <div class="install-top">
            <div class="install-top-dev">全公司</div>
            <div>
                <el-date-picker ref="createTime" v-model="value3" type="year" placeholder="选择日期" auto-complete="off"
                    style="width: 180px;margin: 0;margin-left: 5px;margin-top: 3px;" @change="changeRuleDate" />
            </div>
        </div>
        <!-- 头部内容 -->
        <div class="install-bottom" v-show="show">
            <div class="install-bottom-dev" @click="sop">
                >
            </div>
            <div class="install-bottom-bottom">
                <div style="padding:0;">
                    <div>社会报表<span style="color:#9a9b9b; font-size: 12px;
                        margin-left: 8px;">{{ dataInstall.yearsMonth }}</span></div>
                    <div>社会报表</div>
                    <span class="el-icon-arrow-right"></span>
                </div>
                <div>
                    <div class="install-bottom-colo">企业缴纳</div>
                    <div>{{ dataInstall.enterprisePayment }}</div>
                </div>
                <div>
                    <div class="install-bottom-colo">个人缴纳</div>
                    <div>{{ dataInstall.personalPayment }}</div>
                </div>
                <div>
                    <div class="install-bottom-colo">合计</div>
                    <div>{{ dataInstall.total }}</div>
                </div>
            </div>
        </div>
        
        <!-- 表格 -->
        <div v-show="ople" class="install-table">
            <div style="width: 100%; height: 60px;">
                <exportExcel :statementList="statementList" exportName="公司报表"></exportExcel>
            </div>
            <tableList :statementList="statementList"></tableList>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import moment from "moment"
import { getSocialArchiveList, getSocialArchiveDetail } from "@/api/socialApi/socialApi.js"
import tableList from './components/tableList.vue'
import exportExcel from "@/components/exportExcel.vue"
let value3 = ref('2020');
let dataInstall = ref([])
let statementList = ref([])
let loading = ref(false)
let show = ref(false)
let ople = ref(false)

let installData = () => {
    loading.value = true
    getSocialArchiveList(value3.value).then((res) => {
        // console.log(res);
        if (res.data.length !== 0) {
            show.value = true
            dataInstall.value = res.data[0]
            console.log(dataInstall.value);
            loading.value = false
        }else{
            show.value = false
            loading.value = false
        }

    })
    
}
installData()

let changeRuleDate = (val) => {
    let op = new Date(val).getTime()
    value3.value = moment(op).format("YYYY")
    console.log(value3.value);
    installData()
}
let sop = () =>{
    ople.value  = !ople.value
    getSocialArchiveDetail(value3.value).then((res) => {
        console.log(res.data);
        statementList.value = res.data
    })
}
</script>

<style lang="scss" scoped>
.install-top {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    border-bottom: #ccc solid 1px;
}
.install-table{
    margin-top: 20px;
    background-color: #fff;
    padding: 30px;
}

.install-bottom {
    background-color: #fff;
    display: flex;
    padding: 30px 0;

    .install-bottom-dev {

        width: 60px;
        text-align: center;
        margin-top: 10px;
    }

    .install-bottom-bottom {
        display: flex;

        div {
            position: relative;
            padding: 0 30px;

            .install-bottom-colo {
                font-size: 12px;
                margin-bottom: 10px;
                color: #9a9b9b;
            }
        }
    }
}

.el-icon-arrow-right::before {
    content: "";
    width: 80px;
    // height: 60px;
    border-left: 1px solid #eee;
    position: absolute;
    bottom: -1px;
    left: -20px;

}
</style>